<template>
    <div class="w-full h-full">

        <el-row>
            <el-col :span="24">
                <el-card>
                    <div slot="header">
                        <span>比赛列表</span>
                    </div>
                    <el-table :data="contests" style="width: 100%">
                        <el-table-column prop="name" label="比赛名称"></el-table-column>
                        <el-table-column prop="start_time" label="开始时间"></el-table-column>
                        <el-table-column prop="end_time" label="结束时间"></el-table-column>

                        <el-table-column prop="status" label="状态">
                            <template #default="{ row }">
                                <el-tag v-if="row.status === '未开始'" type="info">{{ row.status }}</el-tag>
                                <el-tag v-else-if="row.status === '进行中'" type="success">{{ row.status }}</el-tag>
                                <el-tag v-else type="danger">{{ row.status }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="{ row }">
                                <el-button v-if="row.status === '进行中'" type="primary" size="mini"
                                    @click="Do(row)">进入</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import dayjs from 'dayjs'
const contests = ref([])
const router = useRouter()
let now = dayjs()
function getContests() {
    axios.post('http://localhost:8000/contests/get_one', {})
        .then(res => {
            contests.value = res.data.data
            contests.value.forEach(contest => {
                contest.start_time = dayjs(contest.start_time).format('YYYY-MM-DD HH:mm:ss')
                contest.end_time = dayjs(contest.end_time).format('YYYY-MM-DD HH:mm:ss')
                contest.status = now.isBefore(dayjs(contest.start_time)) ? '未开始' : now.isAfter(dayjs(contest.end_time)) ? '已结束' : '进行中'
            })

        })
        .catch(err => {
            console.log(err)
        })
}
getContests()

function Do(row) {
    console.log(row)
    router.push({ name: 'do', query: row })
}
</script> 
 
<style scoped></style>